<template>
  <view class="container">

    <!-- Filter Bar -->
    <view class="filter-bar">
      <view class="filter-item" @click="showSeasonFilter">
        <text>季节</text>
        <uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
      </view>
      <view class="filter-item" @click="showSceneFilter">
        <text>场景</text>
        <uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
      </view>
      <view class="filter-item" @click="showStyleFilter">
        <text>风格</text>
        <uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
      </view>
      <view class="filter-item" @click="showDateFilter">
        <text>日期</text>
        <uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
      </view>
    </view>

    <!-- Collection List -->
    <scroll-view scroll-y class="collection-list" v-if="collections.length > 0">
      <view 
        v-for="(outfit, index) in collections" 
        :key="outfit.collection_id" 
        class="outfit-item"
        @click="viewOutfitDetail(outfit)"
      >
<!--        <view class="outfit-preview">
          <image 
            v-if="outfit.preview_image" 
            :src="outfit.preview_image" 
            class="preview-image" 
            mode="aspectFill"
          ></image>
          <view v-else class="preview-placeholder">
            <uni-icons type="clothes" size="40" color="#ddd"></uni-icons>
          </view>
        </view> -->
        
        <view class="outfit-info">
          <view class="outfit-tags">
            <view v-if="outfit.seasons" class="outfit-tag season-tag">
              {{ outfit.seasons }}
            </view>
            <view v-if="outfit.scenes" class="outfit-tag scene-tag">
              {{ outfit.scenes }}
            </view>
            <view v-if="outfit.style" class="outfit-tag style-tag">
              {{ outfit.style }}
            </view>
          </view>
          <view class="outfit-categories" v-if="outfit.categories">
            <text class="categories-text">{{ outfit.categories }}</text>
          </view>
          <view class="outfit-date">
            <text>收藏于: {{ formatDate(outfit.created_at) }}</text>
          </view>
        </view>
        
        <view class="arrow-icon">
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </scroll-view>
    
    <!-- Empty State -->
    <view v-else class="empty-state">
      <image class="empty-image" src="/static/empty-collection.png" mode="aspectFit"></image>
      <text class="empty-text">暂无收藏穿搭</text>
    </view>

    <!-- Season Filter Popup -->
    <uni-popup ref="seasonPopup" type="bottom">
      <view class="filter-popup">
        <view class="popup-header">
          <text>选择季节</text>
          <view @click="hideSeasonFilter" class="close-icon">
            <uni-icons type="close" size="20"></uni-icons>
          </view>
        </view>
        <view class="filter-options">
          <view 
            v-for="(season, index) in seasons" 
            :key="index" 
            class="filter-option"
            :class="{ 'selected': selectedSeasons.includes(season) }"
            @click="toggleSeason(season)"
          >
            {{ season }}
          </view>
        </view>
        <button class="confirm-btn" @click="applyFilters">确定</button>
      </view>
    </uni-popup>

    <!-- Scene Filter Popup -->
    <uni-popup ref="scenePopup" type="bottom">
      <view class="filter-popup">
        <view class="popup-header">
          <text>选择场景</text>
          <view @click="hideSceneFilter" class="close-icon">
            <uni-icons type="close" size="20"></uni-icons>
          </view>
        </view>
        <view class="filter-options">
          <view 
            v-for="(scene, index) in scenes" 
            :key="index" 
            class="filter-option"
            :class="{ 'selected': selectedScenes.includes(scene) }"
            @click="toggleScene(scene)"
          >
            {{ scene }}
          </view>
        </view>
        <button class="confirm-btn" @click="applyFilters">确定</button>
      </view>
    </uni-popup>

    <!-- Style Filter Popup -->
    <uni-popup ref="stylePopup" type="bottom">
      <view class="filter-popup">
        <view class="popup-header">
          <text>选择风格</text>
          <view @click="hideStyleFilter" class="close-icon">
            <uni-icons type="close" size="20"></uni-icons>
          </view>
        </view>
        <view class="filter-options">
          <view 
            v-for="(style, index) in styles" 
            :key="index" 
            class="filter-option"
            :class="{ 'selected': selectedStyles.includes(style) }"
            @click="toggleStyle(style)"
          >
            {{ style }}
          </view>
        </view>
        <button class="confirm-btn" @click="applyFilters">确定</button>
      </view>
    </uni-popup>

    <!-- Date Filter Popup -->
    <uni-popup ref="datePopup" type="bottom">
      <view class="filter-popup">
        <view class="popup-header">
          <text>选择日期范围</text>
          <view @click="hideDateFilter" class="close-icon">
            <uni-icons type="close" size="20"></uni-icons>
          </view>
        </view>
        <view class="date-filter">
          <view class="date-range">
            <view class="date-input">
              <text>开始日期</text>
              <picker 
                mode="date" 
                :value="startDate" 
                @change="onStartDateChange"
              >
                <view class="picker-value">
                  {{ startDate || '请选择' }}
                </view>
              </picker>
            </view>
            <view class="date-input">
              <text>结束日期</text>
              <picker 
                mode="date" 
                :value="endDate" 
                @change="onEndDateChange"
              >
                <view class="picker-value">
                  {{ endDate || '请选择' }}
                </view>
              </picker>
            </view>
          </view>
        </view>
        <button class="confirm-btn" @click="applyFilters">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import setting from "../../setting";
export default {
  data() {
    return {
      collections: [],
      
      // 筛选选项
      seasons: ['春', '夏', '秋', '冬'],
      selectedSeasons: [],
      
      scenes: ['日常', '通勤', '约会', '运动', '旅行', '聚会', '正式场合'],
      selectedScenes: [],
      
      styles: ['休闲', '正式', '运动', '复古', '甜美', '简约', '街头', '优雅'],
      selectedStyles: [],
      
      startDate: '',
      endDate: '',
      
      // 用户ID
      userId: null
    };
  },
  
  onLoad() {
    // 获取用户ID
    this.userId = uni.getStorageSync('user_id') || 1;
    this.loadCollections();
  },
  
  onShow() {
    // 每次页面显示时重新加载数据，以确保数据最新
    this.loadCollections();
  },
  
  methods: {
    // 加载收藏数据 - 修改为使用POST请求
    loadCollections() {
      uni.showLoading({
        title: '加载中...'
      });
      
      // 构���请求参数
      const requestData = {
        user_id: this.userId,
        seasons: this.selectedSeasons.join(','),
        scenes: this.selectedScenes.join(','),
        styles: this.selectedStyles.join(','),
        start_date: this.startDate,
        end_date: this.endDate
      };
      
      // 发送请求到后端API - 修改为POST请求
      uni.request({
        //url: 'http://127.0.0.1:5000/api/get_collections',
		url: setting.url+'/api/get_collections',
        method: 'POST', // 修改为POST
        data: requestData,
        header: {
          'content-type': 'application/json' // 设置请求头为JSON格式
        },
        success: (res) => {
          if (res.statusCode === 200 && res.data.collections) {
            this.collections = res.data.collections;
            console.log(`获取到${res.data.count}条收藏记录`);
          } else {
            uni.showToast({
              title: res.data.error || '获取数据失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    
    // 格式化日期显示
    formatDate(dateString) {
      if (!dateString) return '';
      
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    // 查看穿搭详情 - 修改为使用POST请求
    viewOutfitDetail(outfit) {
		console.log(outfit.collection_id)
      uni.navigateTo({
        url: `../CollectionDetail/CollectionDetail?collection_id=${outfit.collection_id}`
      });
    },
    
    // 季节筛选相关方法
    showSeasonFilter() {
      this.$refs.seasonPopup.open();
    },
    
    hideSeasonFilter() {
      this.$refs.seasonPopup.close();
    },
    
    toggleSeason(season) {
      const index = this.selectedSeasons.indexOf(season);
      if (index === -1) {
        this.selectedSeasons.push(season);
      } else {
        this.selectedSeasons.splice(index, 1);
      }
    },
    
    // 场景筛选相关方法
    showSceneFilter() {
      this.$refs.scenePopup.open();
    },
    
    hideSceneFilter() {
      this.$refs.scenePopup.close();
    },
    
    toggleScene(scene) {
      const index = this.selectedScenes.indexOf(scene);
      if (index === -1) {
        this.selectedScenes.push(scene);
      } else {
        this.selectedScenes.splice(index, 1);
      }
    },
    
    // 风格筛选相关方法
    showStyleFilter() {
      this.$refs.stylePopup.open();
    },
    
    hideStyleFilter() {
      this.$refs.stylePopup.close();
    },
    
    toggleStyle(style) {
      const index = this.selectedStyles.indexOf(style);
      if (index === -1) {
        this.selectedStyles.push(style);
      } else {
        this.selectedStyles.splice(index, 1);
      }
    },
    
    // 日期筛选相关方法
    showDateFilter() {
      this.$refs.datePopup.open();
    },
    
    hideDateFilter() {
      this.$refs.datePopup.close();
    },
    
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    // 应用所有筛选条件
    applyFilters() {
      // 关闭所有弹窗
      this.$refs.seasonPopup && this.$refs.seasonPopup.close();
      this.$refs.scenePopup && this.$refs.scenePopup.close();
      this.$refs.stylePopup && this.$refs.stylePopup.close();
      this.$refs.datePopup && this.$refs.datePopup.close();
      
      // 重新加载数据
      this.loadCollections();
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.header-section {
  padding: 30rpx 0;
  text-align: center;
  margin-bottom: 25rpx;
}

.header-text {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  display: inline-block;
}

.header-text::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 6rpx;
  background-color: #FFC90E;
  border-radius: 3rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 10rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 8rpx;
  background-color: #f5f5f5;
}

.collection-list {
  flex: 1;
  overflow: hidden;
}

.outfit-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.outfit-preview {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-right: 20rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.outfit-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.outfit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.outfit-tag {
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.season-tag {
  background-color: rgba(255, 201, 14, 0.1);
  color: #FFC90E;
  border: 1rpx solid #FFC90E;
}

.scene-tag {
  background-color: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  border: 1rpx solid #4caf50;
}

.style-tag {
  background-color: rgba(33, 150, 243, 0.1);
  color: #2196f3;
  border: 1rpx solid #2196f3;
}

.outfit-categories {
  margin-top: 6rpx;
}

.categories-text {
  font-size: 24rpx;
  color: #666;
}

.outfit-date {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.arrow-icon {
  margin-left: 20rpx;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  margin-bottom: 40rpx;
}


.filter-popup {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx 20rpx 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.close-icon {
  padding: 8rpx;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.filter-option {
  padding: 16rpx 30rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.filter-option.selected {
  border-color: #FFC90E;
  background-color: rgba(255, 201, 14, 0.1);
  box-shadow: 0 2rpx 8rpx rgba(255, 201, 14, 0.3);
  transform: translateY(-2rpx);
}

.date-filter {
  margin-bottom: 40rpx;
}

.date-range {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.date-input {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.date-input text {
  font-size: 28rpx;
  color: #666;
}

.picker-value {
  padding: 16rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  background-color: #f9f9f9;
}

.confirm-btn {
  background-color: #FFC90E;
  color: #333;
  font-size: 28rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 201, 14, 0.3);
}
</style>